{% extends 'pc/base.html' %}
{% load static %}
{% block title %}
    修改帖子|{{ seos.title }}
{% endblock %}
{% block keywords %}
{{ forum.keywords }}
{% endblock %}
{% block desc %}
{{ seos.desc }}
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'css/article_add.css' %}">
    <link rel="stylesheet" href="{% static 'markdown/css/editormd.css' %}" />
    <style>
     pre span{
        display: initial!important;
    }
    </style>
{% endblock %}
{% block link_js %}
 <script src="{% static 'markdown/editormd.js' %}"></script>
{% endblock %}
{% block content %}
    <section class="main">
        <h4>修改帖子</h4>
        <form>
          <div class="form-group">
            <label >标题</label>
            <input type="text" class="form-control validate" name="title" value="{{ forum.title }}"  placeholder="请输入帖子标题-不超过200字">
          </div>
          <div class="form-group">
            <label >关键字(Keywords)</label>
            <input type="text" class="form-control" name="keywords" value="{{ forum.keywords }}"  placeholder="请输入关键字，以英文逗号分割，利于搜索引擎收录-不超过255字">
          </div>

            <div class="form-group">
            <label >帖子内容</label>
            <div id="test-editormd">
                <textarea name="" class="form-control" >{{ forum.content }}</textarea></div>
            </div>
          <div class="form-group">
            <label >选择帖子分类</label>
             <select name="category" class="form-control">
                  <option value="">--请选择--</option>
                 {% for foo in plate %}
                     {% if forum.category.name == foo.name %}
                        <option value="{{ foo.id }}" selected="selected">{{ foo.name }}</option>
                         {% else %}
                            <option value="{{ foo.id }}">{{ foo.name }}</option>
                     {% endif %}
                 {% endfor %}
              </select>
          </div>
          <button type="button" class="btn btn-default" id="btn" onclick="submitUpdate('{{ forum.id }}')">帖子修改</button>
        </form>
    </section>
{% endblock %}
{% block js %}

      <script>
      document.getElementById('test-editormd').addEventListener('paste',function(e){
        if ( !(e.clipboardData && e.clipboardData.items) ) {
            return;
        }
        for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
            var item = e.clipboardData.items[i];
            if (item.kind === "string") {
                item.getAsString(function (str) {
                    //console.log(str);
                })
            } else if (item.kind === "file") {
                var f= item.getAsFile();
                let form =new FormData()
                form.append('editormd-image-file',f)
                $.ajax({
                    contentType : false,
                    processData:false,
                    url:'/article/blog_img_upload/',
                    type:'post',
                    data:form,
                     beforeSend:function(){
                        $("body").append("<p class='loading'><img src='/static/img/5-121204193R5-50.gif'></p>")
                    },
                    success:function (res) {
                          $('.loading').remove()
                        if(res.success==1)testEditor.insertValue("![]("+res.url+")");
                    },
                    error:function (err) {
                          $('.loading').remove()
                        console.log(err)
                    }
                })
            }
        }
    });

    	var testEditor;
        $(function() {
                testEditor = editormd("test-editormd", {
                    width   : "100%",
                    height  : 800,
                    syncScrolling : "single",
                    path    : "/static/markdown/lib/",

                    saveHTMLToTextarea : true,//注意3：这个配置，textarea可以提交
                     emoji: true,//emoji表情，默认关闭
                    /**上传图片相关配置如下*/
                    imageUpload : true,
                    imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL : "/article/blog_img_upload/",
                });

            });
        function validate(obj,el){
             if(!obj||obj.trim() == ""){
                el.css('border-color','red');
                 return false;
            }else {
                 return true
             }
        }
        function submitUpdate(id) {
            if(validate($('.validate').val(),$('.validate')) && validate($('select').val(),$('select')) && validate(testEditor.getMarkdown(),$('#test-editormd'))){
            $("#btn").attr('disabled',true)
            var title = $("input[name='title']").val();
        var keywords =$("input[name='keywords']").val();
        var category =$("select[name='category']").val();
        var form = new FormData()
        form.append('authors','{{ request.user.id }}')
        form.append('title',title)
        form.append('keywords',keywords)
        form.append('content',testEditor.getMarkdown())
        form.append('csrfmiddlewaretoken','{{ csrf_token }}')
        form.append('category',category)
        $.ajax({
            url:'/forum/update/'+id+'/',
            type:'post',
            contentType : false,
            data:form,
            processData:false,
            success:function (data) {
                if(data.code==200){
                    window.location.href='{% url 'forum:forum' %}'
                }else{
                    $("#btn").attr('disabled',false)
                     swal({
                          text: data.data,
                          icon: "error",
                        })
                }
            },
        error:function (xhr) {
            console.log(xhr)
        }
        })
    }


}


    </script>
{% endblock %}